<template>
	<view class="container flex u-flex-col a-c bg-grey">
		<u-form :model="form" ref="uForm" class="form">
			<view class="u-flex j-c">
				<u-image width="120rpx" height="120rpx" style="margin: 30rpx auto" border-radius="10rpx"
					src="/static/images/login/logo.png">
				</u-image>
			</view>
			<view class="flex j-c font40 bold c-m"> OrderAfricargo </view>

			<u-form-item left-icon="account">
				<u-input v-model="form.username" placeholder="input your username" />
			</u-form-item>
			<u-form-item left-icon="lock">
				<u-input type="password" v-model="form.password" placeholder="input your password" />
			</u-form-item>
			<u-button style='background: #080808;color: #fff;' :loading="loading" @click="handleLogin">Login</u-button>
			<view class="flex j-s padv20 c-d">
				<navigator open-type="switchTab" url="/pages/main/tabbar/index/index">
					Skip Login
				</navigator>
				<navigator url="/pages/main/account/register">
					Register
				</navigator>
			</view>
		</u-form>
	</view>
</template>

<script>
	import md5Libs from "uview-ui/libs/function/md5";
	import { mapActions } from "vuex";
	import { SEND_SMS_INTERVAL } from "@/config";
	import { HOME_PAGE_PATH } from "@/config/index";
	import { TOKEN, REDIRECT_PATH, LOGIN_USER_INFO } from "@/config/constant";

	export default {
		data() {
			return {
				form: {
					username: "dang",
					password: "123123",
				},
				loading: false,
			};
		},
		methods: {
			...mapActions(["getCount"]),
			async handleLogin() {
				if (!this.$u.test.rangeLength(this.form.username, [4, 20]))
					return this.$msg("Limit the account length to 4,20 characters");
				if (!this.$u.test.rangeLength(this.form.password, [0, 6]))
					return this.$msg("Limit the password length to 6 characters");
				try {
					this.loading = true;

					let params = Object.assign({}, this.form)
					params.password = md5Libs.md5(params.password)
					let { success, data } = await this.$postB("/user/client-login", params, false);
					if (success) {
						this.setCache(TOKEN, data);
						this.$msg("登录成功", async () => {
							this.getCount();
							this.$redirectAfterLogin();
						});
					} else {
						this.$msg(data || "登录失败");
					}
				} catch (e) {
					console.log(e);
					this.$msg("登录失败");
				} finally {
					this.loading = false;
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		overflow: hidden;
	}

	.form {
		width: 80%;
		padding: 200rpx 0;

		/deep/ {
			.wx-btn {
				padding: 300rpx 0;
			}
		}
	}
</style>
